<template>
  <div class="app-main">
    <transition name="op">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </transition>
    <div class="app-main-tabbar" style="z-index: 1000;">
      <tabbar></tabbar>
    </div>
  </div>
</template>

<script>
  import tabbar from 'components/tabbar'
  export default {
    data () {
      return {}
    },
    components: {
      tabbar
    }
  }
</script>

<style lang='scss'>
  @import '../common/scss/_variable.scss';

  .app-main {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    &-tabbar {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 97px;
      z-index: $zIndex-10--tabBar;
    }
    .op-leave {
      opacity: 1;
    }
    .op-leave-to {
      opacity: 0.8;
    }
    .op-leave-active {
      transition: all .1s ease;
    }
  }
</style>
